<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main view-init">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left"></div>
              <div class="title">Checkbox</div>
              <div class="right"></div>
            </div>
          </div>
          <div class="page-content"><div class="block-title">Inline</div>
<div class="block block-strong">
<p>Lorem <label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label> ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi <label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla mollitia!</p>
</div>
<div class="block-title">Checkbox Group</div>
<div class="list">
<ul>
<li>
<label class="item-checkbox item-content">
<input type="checkbox" name="demo-checkbox" value="Books" checked="checked"/>
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title">Books</div>
</div>
</label>
</li>
<li>
<label class="item-checkbox item-content">
<input type="checkbox" name="demo-checkbox" value="Movies"/>
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title">Movies</div>
</div>
</label>
</li>
<li>
<label class="item-checkbox item-content">
<input type="checkbox" name="demo-checkbox" value="Food"/>
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title">Food</div>
</div>
</label>
</li>
<li>
<label class="item-checkbox item-content">
<input type="checkbox" name="demo-checkbox" value="Drinks"/>
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title">Drinks</div>
</div>
</label>
</li>
</ul>
</div>
<div class="block-title">With Media Lists</div>
<div class="list media-list">
<ul>
<li>
<label class="item-checkbox item-content">
<input type="checkbox" name="demo-media-checkbox" value="1"/>
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Facebook</div>
<div class="item-after">17:14</div>
</div>
<div class="item-subtitle">New messages from John Doe</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</li>
<li>
<label class="item-checkbox item-content">
<input type="checkbox" name="demo-media-checkbox" value="2"/>
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">John Doe (via Twitter)</div>
<div class="item-after">17:11</div>
</div>
<div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</li>
<li>
<label class="item-checkbox item-content">
<input type="checkbox" name="demo-media-checkbox" value="3"/>
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Facebook</div>
<div class="item-after">16:48</div>
</div>
<div class="item-subtitle">New messages from John Doe</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</li>
<li>
<label class="item-checkbox item-content">
<input type="checkbox" name="demo-media-checkbox" value="4"/>
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">John Doe (via Twitter)</div>
<div class="item-after">15:32</div>
</div>
<div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</label>
</li>
</ul>
</div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>var app = new Framework7();</script>
  </body>
</html>